<template>
  <div>
    <div class="-mb-8 ml-4"><BaseTitle :title="resourceData.title" /></div>
    <div :id="domId" class="w-full h-64"></div>
  </div>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue'
import echarts from '@/utils/echarts'

const props = defineProps({
  idx: {
    type: Number,
    default: 0
  },
  resourceData: {
    type: Object,
    default: () => ({})
  }
})
const seriesOption = ref([])
const domId = ref(null)
const initLineChart = () => {
  const LineDom = document.getElementById(domId.value)
  const registerChart = echarts.init(LineDom)
  registerChart.setOption({
    grid: {
      left: '3%',
      right: '6%',
      bottom: '3%',
      // top: '15%',
      containLabel: true
    },
    legend: {
      itemWidth: 10,
      itemHeight: 10,
      selectedMode: false,
      top: '20',
      right: '5%',
      // data: ['左眼(OS)', '右眼(OD)']
      data: props.resourceData.legendData
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: 'e5e7eb'
        }
      },
      data: props.resourceData.dataX,
      axisLabel: {
        show: true,
        formatter: function (params, idx) {
          return '{color1|' + props.resourceData.dataX[idx].value + '}\n{color2|' + props.resourceData.dataX[idx].age + '岁}'
        },
        rich: {
          color1: {
            color: '#333333'
          },
          color2: {
            color: '#cccccc',
            padding: [4, 0, 0, 0]
          }
        }
      }
    },
    tooltip: {
      trigger: 'axis'
      // formatter: function (params) {
      //   let tooltipHtml = ''
      //   tooltipHtml += '<strong>' + params[0].name + '</strong><br>'
      //   chartData.forEach(function (data) {
      //     tooltipHtml += `<span style="color:${data.color}">${data.name}：${data.value[params[0].dataIndex]} ${data.unit}<span><br>`
      //   })
      //   return tooltipHtml
      // }
    },
    yAxis: {
      type: 'value',
      name: props.resourceData.unit,
      min: 'dataMin',
      max: 'dataMax',
      nameTextStyle: {
        padding: [0, 0, 0, 80]
      },
      showLabel: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: 'e5e7eb'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: seriesOption.value
    // [
    // {
    //   data: [120, 200, 150, 80, 70],
    //   type: 'line',
    //   name: '左眼(OD)',
    //   stack: 'Total',
    //   itemStyle: {
    //     color: '#009dd9'
    //   }
    // },
    // {
    //   data: [200, 160, 180, 180, 170],
    //   type: 'line',
    //   name: '右眼(OS)',
    //   stack: 'Total',
    //   itemStyle: {
    //     color: '#0000ff'
    //   }
    // }
    // ]
  })
}
watch(
  () => props.resourceData,
  (val) => {
    if (val.title) {
      domId.value = 'lineChart' + props.idx
      nextTick(() => {
        seriesOption.value = val.dataY.map((item) => {
          return {
            data: item.data,
            type: 'line',
            name: item.name,
            itemStyle: {
              color: item.color
            }
          }
        })
        initLineChart()
      })
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
<style lang="less" scoped></style>
